<template>
	<view>
		<view class="report-box":style="'background-image:url('+reportBg[reportIndex]+')'"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<view class="report-item" v-if="reportIndex==0">
				<view class="report-title">
					<view class="yellow">乒个乓老板专属账单</view>
					<view>查看过去一年里</view>
					<view>你收获了些什么</view>
				</view>
				<view class="look-box flexWarpCenterColumn">
					<image src="/static/index/report-down.png" class="report-down"></image>
					<view class="look-btn">立即查看</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==1">
				<view class="report-cont" style="padding-top: 380upx;">
					<view><text class="hi">Hi,</text>亲爱的乒个乓店长</view>
					<view>今天是你加入乒个乓大家庭的第<text class="bigyellow">{{day_num}}</text>天，</view>
					<view>我们风雨同舟肩并肩，手拉手，</view>
					<view>一起将乒乓球事业做大，在过去的日子里，</view>
					<view>您的门店一共贡献了<text class="smallyellow">{{tatal_income}}</text>米的GDP，</view>
					<view>真是个利国利民的好宝宝!</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==2">
				<view class="report-cont" style="padding-top: 200upx;">
					<view>您的第一个二次消费</view>
					<view>的客人是<text class="bigyellow">{{twiceName}}</text></view>
					<view>第一次消费时间是 {{twiceList[0].create_date}}</view>
					<view>{{twiceDay}} 天之后他又来了。</view>
					<view>一定是你与生俱来的</view>
					<view>乒个乓气质打动了<text class="bigwhite">Ta</text> 。</view>
					<view class="chat-box">
						<view class="chat-item flexWrapNo">
							<view class="chat-text">第一次消费时间:{{twiceList[0].create_date}}</view>
							<view class="chat-img">
								<image src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"></image>
							</view>
						</view>
						<view class="chat-item flexWrapNo">
							<view class="chat-text">第二次消费时间:{{twiceList[1].create_date}}</view>
							<view class="chat-img">
								<image src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==3">
				<view class="report-cont" style="padding-top: 200upx;">
					<view>常怀<text class="bigyellow">感恩之心</text></view>
					<view>一直是乒个乓文化的一部分，</view>
					<view>过年了,记得给榜一大哥</view>
					<view @tap.prevent="copy(top_member.mobile)">{{top_member.nickname}}手机号{{top_member.mobile}}</view>
					<view>发个消息(点击手机号可复制)</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==4">
				<view class="report-cont" style="padding-top: 180upx;">
					<view class="smallyellow">新春贺喜 恭喜发财</view>
					<view>来年再战，还得依仗大哥们。</view>
					<view>也别忘记其他铁粉们的</view>
					<view>贡献，探花到 <text class="bigyellow">第十名</text> </view>
					<view>[点击头像可复制用户手机号]</view>
					<view class="chat-box">
						<view class="chat-item flexWrapNo" v-for="(item,index) in top_member_list" :key="index">
							<view class="chat-text">共消费{{item.quantity}}小时，{{item.total_pay_money}}元</view>
							<view class="chat-img" @tap.prevent="copy(item.mobile)">
								<image :src="item.avatar||'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==5">
				<view class="report-cont" style="padding-top: 200upx;">
					<view>营业额增长最快的是第<text class="bigyellow">{{top_amount.order_count_day}}</text>天，</view>
					<view>你还记得那一天做了什么行之有效的活动吗?</view>
					<view>还是单纯靠颜值就感动了天地?</view>
					<view>客单数量最多的是第<text class="bigyellow">{{top_amount.amount_day}}</text> 天，</view>
					<view>那一天是<text class="bigyellow">{{top_amount.month}}</text>月<text class="bigyellow">{{top_amount.day}}</text>号，星期<text class="bigyellow">{{top_amount.week}}</text>，</view>
					<view>这一天你简直火出了天际，</view>
					<view>这一天门店客单数量达到了<text class="bigyellow">{{top_amount.order_count}}</text>单，</view>
					<view>打败了<text class="bigyellow">{{top_amount.exceed_rate}}%</text>的同行者。</view>
					<view>你知道乒个乓单日客单记录是多少吗？</view>
					<view>单日<text class="bigyellow">{{top_amount.max_order_count}}</text>单，</view>
					<view>看来我们还能做的更好。</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==6">
				<view class="report-cont" style="padding-top: 340upx;">
					<view>拥有<text class="bigyellow">70</text>分的坚定，</view>
					<view>胜过90分的飘摇</view>
					<view>不骄不躁，定力至上，与时俱进，慢慢赢</view>
					<view>在这个流量为王的年代，我们有自己的法宝</view>
					<view>过去的日子里</view>
					<view>美团贡献了<text class="bigyellow bigyellow2">{{year_total_amount.meituan_order_num}}</text>单，<text class="bigyellow bigyellow2">{{year_total_amount.tuan_amount}}</text>销售额</view>
					<view>抖音贡献了<text class="bigyellow bigyellow2">{{year_total_amount.douyin_order_num}}</text>单，<text class="bigyellow bigyellow2">{{year_total_amount.douyin_amount}}</text>销售额</view>
					<view>扫码贡献了<text class="bigyellow bigyellow2">{{year_total_amount.wx_order_num}}</text>单，<text class="bigyellow bigyellow2">{{year_total_amount.order_online_amount}}</text>销售额</view>
					<view>充值贡献了<text class="bigyellow bigyellow2">{{year_total_amount.reg_order_num}}</text>单，<text class="bigyellow bigyellow2">{{year_total_amount.recharge_money}}</text>销售额</view>
					<view v-if="year_total_amount.tk_order_num">通卡贡献了<text class="bigyellow bigyellow2">{{year_total_amount.tk_order_num}}</text>单，<text class="bigyellow bigyellow2">{{year_total_amount.card_amount}}</text>销售额</view>
					<view>在新的一年，要踏踏实实的，继续做好做强</view>
					<view>各平台的流量。白发如新，初恋常在!</view>
					<view class="progress-box flexWrapNo">
						<view class="progress-child flexWarpCenterColumn" :style="{width:year_total_amount.mProgress+'%'}" v-if="year_total_amount.mProgress!=0">
							<view class="progress"></view>
							美团
						</view>
						<view class="progress-child flexWarpCenterColumn douyin":style="{width:year_total_amount.dProgress+'%'}"  v-if="year_total_amount.dProgress!=0">
							<view class="progress"></view>
							抖音
						</view>
						<!-- <view class="progress-child flexWarpCenterColumn douyin":style="{width:year_total_amount.tProgress+'%'}" v-if="year_total_amount.tProgress!=0">
							<view class="progress"></view>
							通卡
						</view>
						<view class="progress-child flexWarpCenterColumn douyin":style="{width:year_total_amount.cProgress+'%'}" v-if="year_total_amount.cProgress!=0">
							<view class="progress"></view>
							充值
						</view> -->
						<view class="progress-child flexWarpCenterColumn scan":style="{width:year_total_amount.wProgress+'%'}" v-if="year_total_amount.wProgress!=0">
							<view class="progress"></view>
							扫码
						</view>
					</view>
				</view>
			</view>
			<view class="report-item" v-if="reportIndex==7">
				<view class="report-cont" style="padding-top: 340upx;">
					<view>日月之行，若出其中，</view>
					<view>星汉灿烂，若出其里。</view>
					<view>凡人微光，渺小的我是伟大时代的见证者。</view>
					<view>2024年乒个乓与您一道汇聚在一起，</view>
					<view>去征服星辰大海</view>
					<view class="bigyellow" style="margin: 0;margin-top: 30upx;">新年快乐，恭喜发财</view>
				</view>
			</view>
			<view class="report-tips">·数据由貘数与貘型大数据提供·</view>
		</view>
		<view class="play-icon" @tap.stop="playAudio()">
			<image src="https://static.mo-yu.vip/uploads/20240208/82c741c2a909b1fb2417fdce396bcb2f.png" v-if="isPlay"></image>
			<image src="https://static.mo-yu.vip/uploads/20240208/ba83f4aad946b95254a938c1ac8f6e64.png" v-else></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: '',
				reportIndex: 0,
				reportBg: [
					'https://static.mo-yu.vip/report/2023/01.jpg',
					'https://static.mo-yu.vip/report/2023/02.jpg',
					'https://static.mo-yu.vip/report/2023/03.jpg',
					'https://static.mo-yu.vip/uploads/20240206/7b638e727bf8a3ae329edf55d4f920d2.jpg',
					'https://static.mo-yu.vip/report/2023/05.jpg',
					'https://static.mo-yu.vip/report/2023/06.jpg',
					'https://static.mo-yu.vip/report/2023/07.jpg',
					'https://static.mo-yu.vip/report/2023/08.jpg'
				],
				startY: '', // 触摸起始点纵坐标
				deltaY: '',
				day_num:"",
				tatal_income:"",
				top_member_list:[],
				twiceName:"",
				twiceDay:"",
				twiceList:[],
				year_total_amount:{},
				top_amount:{},
				top_member:{},
				bgAudioManager:{},
				voicePath:"https://static.mo-yu.vip/uploads/20240208/fb5c9479cadf6c83c9c85af555bb3344.mp3",
				innerAudioContext: null,
				isPlay:false,
			};
		},
		created() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()

			this.windowHeight = windowHeight;
		},
		onShareAppMessage: function(e) {
			let that=this
			return {
				title:"年度报告",
				path: `pages/index/yearReport`,
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		onLoad() {
			this.getInfo();
			this.playAudio();
			// this.bgAudioManager = uni.getBackgroundAudioManager();
			// this.bgAudioManager.title = '致爱丽丝';
			// this.bgAudioManager.singer = '暂无';
			// this.bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
			// this.bgAudioManager.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
		},
		onUnload() {
			// this.bgAudioManager.stop();
		},
		onBackPress() {
			if (this.isPlay) {
				this.innerAudioContext.pause()
				this.isPlay = false
				console.log('onBackPress退出页面')
			}
		},
		onUnload() {
			if (this.isPlay) {
				this.innerAudioContext.pause()
				this.isPlay = false
				console.log('onUnload退出页面')
			}
		},
		methods: {
			copy(mobile){
				uni.setClipboardData({
					data:mobile,
					success: function() {
						console.log('success');
					}
				});
			},
			playAudio(){
				console.log(this.voicePath);
				if(this.innerAudioContext){
					if (this.isPlay) {
						this.innerAudioContext.pause()
						this.isPlay = false
					} else {
						this.innerAudioContext.play()
						this.isPlay = true
					}
				}else{
					if(this.voicePath){
						//实例化声音
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.obeyMuteSwitch =false//是否遵循系统静音开关
						this.innerAudioContext.src=this.voicePath
						this.innerAudioContext.loop=true
						if(this.modelPlatform=='android'){
							console.log('进入安卓播放方法');
							this.innerAudioContext.play()
						}else{
							console.log('进入ios播放方法');
							this.innerAudioContext.autoplay = true;
						}
						this.innerAudioContext.onPlay(() => {
						  console.log('开始播放');
						});
						this.innerAudioContext.onError((res) => {
						  console.log(res.errMsg);
						  console.log(res.errCode);
						});
						this.isPlay = true
						this.innerAudioContext.onEnded(() => {
							this.isPlay = false
						})
					}else{
						uni.showToast({
							title: "暂无音频文件",
							icon: "none"
						})
					}
				}
			},
			getInfo(){
				this.$request.post(this.$api.yearReport, {
					store_id:uni.getStorageSync('store_id'),
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						let {data}=res
						this.day_num=data.day_num
						this.tatal_income=data.total_amount.tatal_income
						this.top_member_list=data.top_member_list
						this.twiceName=data.twice_consuming.nickname
						this.twiceDay=data.twice_consuming.day_num
						this.twiceList=data.twice_consuming.order
						this.year_total_amount=data.year_total_amount
						this.top_amount=data.top_amount
						this.top_member=data.top_member
						let month=this.top_amount.report_date.split('-')[1]
						let day=this.top_amount.report_date.split('-')[2]
						this.top_amount.month=month
						this.top_amount.day=day
						this.year_total_amount.mProgress=(this.year_total_amount.meituan_order_num/Number(this.year_total_amount.order_count)).toFixed(2)*100
						this.year_total_amount.dProgress=(this.year_total_amount.douyin_order_num/Number(this.year_total_amount.order_count)).toFixed(2)*100
						this.year_total_amount.wProgress=(this.year_total_amount.wx_order_num/Number(this.year_total_amount.order_count)).toFixed(2)*100
						this.year_total_amount.cProgress=(this.year_total_amount.reg_order_num/Number(this.year_total_amount.order_count)).toFixed(2)*100
						this.year_total_amount.tProgress=(this.year_total_amount.tk_order_num/Number(this.year_total_amount.order_count)).toFixed(2)*100
					}
				})
			},
			next() {
				if (this.reportIndex == 7) {
					return;
				}
				this.reportIndex++
				console.log(this.reportIndex)
			},
			touchStart(event) {
				// 记录触摸起始点的横坐标
				this.startY = event.touches[0].clientY;
				console.log(this.startY)
			},
			touchMove(event) {
				// 计算滑动距离
				this.deltaY=0
				let currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			touchEnd() {
				if((this.startY>340&&this.startY<670)&&this.reportIndex==4){
					return;
				}
				if((this.startY>190&&this.startY<240)&&this.reportIndex==3){
					return;
				}
				console.log(this.deltaY)
				// 判断滑动方向
				if (this.deltaY&&this.deltaY < 50) {
					if (this.reportIndex == 7) {
						return;
					}
					this.reportIndex++
					console.log('向下滑动逻辑')
				} else if (this.deltaY&&this.deltaY > -50) {
					if (this.reportIndex == 0) {
						return;
					}
					this.reportIndex--
					console.log('向上滑动逻辑')
				}
			},
		}
	}
</script>

<style lang="scss">
	.play-icon{
		position: fixed;
		top: 20upx;
		right: 30upx;
		width: 120upx;
		height: 130upx;
		border-radius: 50%;
		overflow: hidden;
	}
	.report-box {
		background-image: url('https://static.mo-yu.vip/report/2023/01.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;

		.report-item {
			.report-title {
				font-size: 70rpx;
				font-family: SourceHanSansCN;
				font-weight: 500;
				font-style: italic;
				color: #FFFFFF;
				line-height: 86rpx;
				text-align: center;
				padding-top: 160upx;

				.yellow {
					font-size: 74rpx;
					font-family: SourceHanSansCN;
					font-weight: 800;
					font-style: italic;
					color: #F6DF60;
					line-height: 91rpx;
					margin-bottom: 30upx;
				}
			}
		}

		.look-box {
			position: fixed;
			bottom: 110upx;
			left: 0;
			right: 0;
			margin: auto;

			.report-down {
				width: 68upx;
				height: 60upx;
			}

			.look-btn {
				width: 424rpx;
				height: 83rpx;
				text-align: center;
				border: 1px solid #FFFFFF;
				border-radius: 50rpx;
				font-size: 42rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 83rpx;
				margin-top: 30upx;
			}
		}

		.report-tips {
			font-size: 20rpx;
			font-family: SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 23rpx;
			position: fixed;
			bottom: 48upx;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
		}

		.report-cont {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 65rpx;
			padding: 0 104upx;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;

			.hi {
				font-size: 89rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FCC600;
				line-height: 161rpx;
			}

			.bigyellow {
				font-size: 57rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FCC600;
				margin: 0 10upx;
			}
			.bigyellow2{
				font-size:30upx;
			}
			.smallyellow {
				font-size: 41rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FCC600;
			}

			.bigwhite {
				font-size: 66rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}

			.chat-box {
				margin-top: 70upx;
				height: 800upx;
				overflow-y: scroll;
				width: max-content;
				.chat-item {
					margin-bottom: 65upx;

					.chat-text {
						width: 453rpx;
						height: 82rpx;
						line-height: 82rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1px solid #FFFFFF;
						border-radius: 23rpx 23rpx 0rpx 23rpx;
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						font-weight: bold;
						color: #2F2D2D;
						flex: none;
					}

					.chat-img {
						width: 98upx;
						height: 98upx;
						border-radius: 50%;
						margin-left: 30upx;
						flex: none;
						overflow: hidden;
					}
				}
			}
		}
		.progress-box{
			margin-top: 70upx;
			.progress-child{
				font-size: 22rpx;
				font-family: SourceHanSansCN;
				font-weight: 800;
				color: #FCC600;
				line-height: 57rpx;
				.progress{
					width: 100%;
					height: 40upx;
					background: #FCC600;
					border-radius: 23rpx 0rpx 0rpx 23rpx;
					margin-bottom: 10upx;
				}
			}
			.douyin{
				color:#8D6EFF;
				.progress{
					background: #8D6EFF;
					border-radius:0;
				}
			}
			.scan{
				color:#97E3FF;
				.progress{
					background: #97E3FF;
					border-radius: 0rpx 23rpx 23rpx 0rpx ;
				}
			}
		}
	}
</style>